<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" style="margin-left: 5px" @click="addDialog">添加系列</el-button>
    </div>
    <el-tabs v-model="active" style="margin-top:15px;width: 653px" type="border-card">
      <el-tab-pane v-for="item in type" :key="item" :name="item" :label="item">
        <tab-pane
          v-if="active === item"
          :list="item === 'Scratch'? scratchList : pythonList"
          @edit="editDialog"
          @reload="getList"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-if="dialog" :visible.sync="dialog" :title="title">
      <series-dialog
        :total="active === 'Scratch'? scratchList.length : pythonList.length"
        :form="form"
        :mode="isEditMode"
        @close="dialog=false"
        @reload="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { fetchSeriesList } from '../../api/serires'
import TabPane from './module/SeriesTabPane'
import SeriesDialog from './module/SeriesDialog'
export default {
  name: 'Series',
  components: { SeriesDialog, TabPane },
  data() {
    return {
      type: ['Scratch', 'Python'],
      dialog: false,
      title: '',
      scratchList: [],
      pythonList: [],
      active: 'Scratch',
      isEditMode: false,
      form: {
        id: null,
        name: '',
        type: 'Scratch'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * resetForm 重置表单数据
     * */
    resetForm() {
      this.form = this.$options.data().form
    },
    getList() {
      this.scratchList = []
      this.pythonList = []
      fetchSeriesList().then(response => {
        const items = response.data.items
        for (const i in items) {
          if (items[i].type === 1) {
            response.data.items[i].type = 'Scratch'
            this.scratchList.push(response.data.items[i])
          }
          if (items[i].type === 2) {
            response.data.items[i].type = 'Python'
            this.pythonList.push(response.data.items[i])
          }
        }
        this.$sort(this.scratchList)
        this.$sort(this.pythonList)
      }).catch(() => {
        this.$ERROR('获取系列失败')
      })
    },
    editDialog(item) {
      this.resetForm()
      this.$setDialog(true, '系列设置', true)
      this.form = {
        id: item.id,
        name: item.name,
        type: item.type
      }
    },
    addDialog() {
      this.resetForm()
      this.$setDialog(true, '添加系列', false)
    }
  }
}
</script>

<style scoped>

</style>
